
<!DOCTYPE html>
<html>

<!-- Head -->
<head>

	<title>登录页面</title>

	<!-- Meta-Tags -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
	    #canvas{
	        cursor:pointer;
	    }
	</style>
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //Meta-Tags -->

	<!-- Style --> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
	<script type="text/javascript" src="js/jquery.min.js" ></script>

	<script>
		$.ajaxSetup({
		    xhrFields: {
		        withCredentials: true
		    }
		});
		
		function log(){
			$.ajax({
//				xhrFields: {
//				withCredentials: true
//			},
			type:"post",	
			url:"http://localhost:8080/XM_01_war/login",
			asasync:true,
			
			dataType:"json",
			data:$("#log").serialize(),
			success:function(msg){
				if(msg=="1"){
					alert("账号不存在");
				}else if(msg=="2"){
					alert("用户名/密码错误");
				}else if(msg=="3"){
					alert("验证码错误");
				}else if(msg=="4"){
					alert("用户已登录");
				}else if(msg=="5"){
					alert("用户冻结");
				}else if(msg=="6"){
					alert("登录成功");
				window.location.href = "http://127.0.0.1:8020/inxedu/index.html";	
				}
			}
			
		});
		}
	</script>


</head>
<!-- //Head -->

<!-- Body -->
<body>

	<h1>登录页面</h1>

	<div class="container w3layouts agileits">
		<div class="login w3layouts agileits">
			<h2>登 录</h2>
			<form id="log" method="post">
				<input type="text" name="username" placeholder="用户名" required="">
				<input type="password" name="password" placeholder="密码" required="">
				<input type="text" id="randomcode" name="randomcode" placeholder="验证码" required="">
				<input type="hidden" id="hid" name="hid"/>
				 <canvas id="canvas" width="120px" height="40px"></canvas>
				<!--<img src="" width="56" height="20" align='absMiddle'/><ahref=javascript:randomcode_refresh()>刷新</a>-->
			</form>
			<!--<ul class="tick w3layouts agileits">
				<li>
					<input type="checkbox" id="brand1" value="">
					<label for="brand1"><span></span>记住我</label>
				</li>
			</ul>-->
			<div class="send-button w3layouts agileits">
				<form>
					<input type="button" onclick="log()" value="登 录">
				</form>
			</div>
			<!--<a href="#">记住密码?</a>-->
			<!--<div class="social-icons w3layouts agileits">
				<p>- 其他方式登录 -</p>
				<ul>
					<li class="qq"><a href="#">
					<span class="icons w3layouts agileits"></span>
					<span class="text w3layouts agileits">QQ</span></a></li>
					<li class="weixin w3ls"><a href="#">
					<span class="icons w3layouts"></span>
					<span class="text w3layouts agileits">微信</span></a></li>
					<li class="weibo aits"><a href="#">
					<span class="icons agileits"></span>
					<span class="text w3layouts agileits">微博</span></a></li>
					<div class="clear"> </div>
				</ul>
			</div> -->
			<!--<div class="clear"></div>-->
		</div><!--<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>-->
		<!--<div class="register w3layouts agileits">
			<h2>注 册</h2>
			<form action="#" method="post">
				<input type="text" Name="Name" placeholder="用户名" required="">
				<input type="text" Name="Email" placeholder="邮箱" required="">
				<input type="password" Name="Password" placeholder="密码" required="">
				<input type="text" Name="Phone Number" placeholder="手机号码" required="">
			</form>
			<div class="send-button w3layouts agileits">
				<form>
					<input type="submit" value="免费注册">r
				</form>
			</div>
			<div class="clear"></div>
		</div>-->

		<div class="clear"></div>

	</div>

	<!--
    	：
    <div class="footer w3layouts agileits">
		<p>Copyright &copy; More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>-->
	<script>

        //生成随机数

    function randomNum(min,max){

        return Math.floor(Math.random()*(max-min)+min);

    }

        //生成随机颜色RGB分量

    function randomColor(min,max){

        var _r = randomNum(min,max);

        var _g = randomNum(min,max);

        var _b = randomNum(min,max);

        return "rgb("+_r+","+_g+","+_b+")";

    }

    //先阻止画布默认点击发生的行为再执行drawPic()方法

    document.getElementById("canvas").onclick = function(e){

        e.preventDefault();
		drawPic();

    };

    function drawPic(){

        //获取到元素canvas

        var $canvas = document.getElementById("canvas");

        var _str = "0123456789";//设置随机数库

        var _picTxt = "";//随机数

        var _num = 4;//4个随机数字

        var _width = $canvas.width;

        var _height = $canvas.height;

        var ctx = $canvas.getContext("2d");//获取 context 对象

        ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐

        ctx.fillStyle = randomColor(180,240);//填充画布颜色

        ctx.fillRect(0,0,_width,_height);//填充矩形--画画

        for(var i=0; i<_num; i++){

            var x = (_width-10)/_num*i+10;

            var y = randomNum(_height/2,_height);

            var deg = randomNum(-45,45);

            var txt = _str[randomNum(0,_str.length)];

            _picTxt += txt;//获取一个随机数

            ctx.fillStyle = randomColor(10,100);//填充随机颜色

            ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小，字体为SimHei

            ctx.translate(x,y);//将当前xy坐标作为原始坐标

            ctx.rotate(deg*Math.PI/180);//旋转随机角度

            ctx.fillText(txt, 0,0);//绘制填色的文本

            ctx.rotate(-deg*Math.PI/180);

            ctx.translate(-x,-y);

        }

        for(var i=0; i<_num; i++){

            //定义笔触颜色

            ctx.strokeStyle = randomColor(90,180);

            ctx.beginPath();

            //随机划线--4条路径

            ctx.moveTo(randomNum(0,_width), randomNum(0,_height));

            ctx.lineTo(randomNum(0,_width), randomNum(0,_height));

            ctx.stroke();

        }

        for(var i=0; i<_num*10; i++){

            ctx.fillStyle = randomColor(0,255);

            ctx.beginPath();

            //随机画原，填充颜色

            ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);

            ctx.fill();

        }
        $("#hid").val(_picTxt);
		
        return _picTxt;//返回随机数字符串

    }

    drawPic();

</script>
</body>
<!-- //Body -->

</html>